<template>
  <div>
    <van-button class="m-add" type="primary" block @click="show = true"
      >添加产值</van-button
    >
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item.id" class="m-cost">
        <van-row>
          <van-col span="12"> {{ item.createTime }}</van-col>
          <van-col span="12" style="color: red; font-weight: bold">
            {{ item.money }}元</van-col
          >
        </van-row>
        <div style="color: #969799">{{ item.item }}</div>
      </div>
    </van-list>
    <van-popup
      v-model="show"
      closeable
      :style="{ height: '40%', width: '100%' }"
    >
      <van-form @submit="onSubmit" label-width="56px" style="margin-top: 50px;">
        <van-field
          v-model="newItem"
          label="产值说明"
          placeholder="例如：线上产值"
          :rules="[{ required: true, message: '必填项' }]"
        />
        <van-field
          v-model="newMoney"
          type="number"
          label="数字"
          :rules="[{ required: true, message: '必填项' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import List from 'vant/lib/list'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/list/style'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import CellGroup from 'vant/lib/cell-group'
import 'vant/lib/cell-group/style'
import Cell from 'vant/lib/cell'
import 'vant/lib/cell/style'
import { getIncomeBySid, addIncome } from '@/api/ym'
import Popup from 'vant/lib/popup'
import 'vant/lib/popup/style'
import Form from 'vant/lib/form'
import Field from 'vant/lib/field'
import 'vant/lib/form/style'
import 'vant/lib/field/style'
import Notify from 'vant/lib/notify'
import 'vant/lib/notify/style'

export default {
  components: {
    [Notify.name]: Notify,
    [Form.name]: Form,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data () {
    return {
      newItem: '',
      newMoney: 0,
      show: false,
      list: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    ...mapGetters(['openId'])
  },
  // created () {
  //   this.fetchData()
  // },
  methods: {
    onLoad () {
      this.loading = false
      getIncomeBySid(this.openId).then(res => {
        this.list = res.data.data
      })
      this.finished = true
    },
    onSubmit () {
      addIncome({sid: this.openId, item: this.newItem, money: this.newMoney}).then(res => {
        this.list.unshift(res.data.data)
        this.newItem = ''
        this.newMoney = 0
        this.show = false
        Notify({ type: 'success', message: '提交成功' })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.m-add {
  margin-bottom: 3px;
}
.m-cost {
  background-color: #fff;
  // color:#C31171;
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  box-shadow: 0px 0px 5px rgb(201, 201, 201);
  margin-bottom: 3px;
}
</style>
